<template>
	<view class="content">
		<view class="swiper-wrapper">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/banner1.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/banner2.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="page-nav uni-flex">
			<view class="page-nav__item uni-flex-item uni-center">
				<view>
					<image src="../../static/fenlei.png"></image>
				</view>
				<view><text>回收分类</text></view>
			</view>
			<view class="page-nav__item uni-flex-item uni-center" @tap="scanDeliver">
				<view>
					<image src="../../static/scan.png"></image>
				</view>
				<view><text>扫码投递</text></view>
			</view>
			<view class="page-nav__item uni-flex-item uni-center">
				<view>
					<image src="../../static/help.png"></image>
				</view>
				<view><text>投递指南</text></view>
			</view>
		</view>

		<view class="service uni-flex">
			<image src="../../static/service.png"></image>
			<text>客服电话：{{ servicePhone }}</text>
		</view>

		<user-data :points="points" :allPoints="allPoints" :amount="amount" :deliverCount="deliverCount">
		</user-data>

		<view class="machine-list">
			<navigator v-for="(item, index) in machineList" :key="index" :url="'/pages/index/map?index='+index">
				<view class="machine-list__item uni-flex">
					<view class="uni-flex-item machine-list__item-left">
						<view class="machine-list__item__addr">
							<text class="icon icon-weizhi"></text>
							<text>{{item.address}}</text>
						</view>
						<view v-if="item.status === '1'" class="machine-list__item__status status1">
							<text>正常投递</text>
						</view>
						<view v-if="item.status === '0'" class="machine-list__item__status status2">
							<text>维护中</text>
						</view>
					</view>
					<view class="uni-flex-item machine-list__item-right">
						<view class="machine-list__item__distance">
							<text>{{item.distance}}</text>
						</view>
						<view class="machine-list__item__arrow">
							<text class="icon icon-gengduo1"></text>
						</view>
					</view>
				</view>
			</navigator>
		</view>

		<view @tap="login">点击登录</view>
		
		<button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo">获取用户信息</button>

		<view v-if="hasLogin">哈哈哈哈</view>

		<icon-list></icon-list>

		<view class="tabbar-line">
		</view>
	</view>
</template>

<script>
	import userData from '@/components/userData.vue'
	import iconList from '@/components/iconList.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		components: {
			userData,
			iconList
		},
		data() {
			/**
			 * @property {String} servicePhone 
			 * @property {Array} machineList 
			 */
			return {
				points: '0', //积分
				allPoints: '0', //累计积分
				amount: '0', //奖励金
				deliverCount: '0', //投递次数
				servicePhone: '4006868272', //客服电话
				currentLongitude: '', //当前经度
				currentLatitude: '', //当前纬度
			}
		},
		computed: {
			...mapState([
				'hasLogin', 
				'machineList',
			])
		},
		onLoad() {
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.currentLongitude = res.longitude;
					this.currentLatitude = res.latitude;
					this.getMachineList();
				}
			});
		},
		methods: {
			...mapMutations(['setMachineList', 'loginCb']),
			/**
			 * @description 登录
			 */
			login() {
				uni.login({
				  provider: 'weixin',
				  success: (loginRes) => {
				    console.log(loginRes);
						this.loginCb('weixin');
				  }
				});
			},
			onGotUserInfo(e) {
				console.log(e.detail.errMsg)
				console.log(e.detail.userInfo)
				console.log(e.detail.rawData)
			},
			/**
			 * @description 获取用户信息
			 */
			getUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: function (infoRes) {
						console.log('用户昵称为：' + infoRes.userInfo.nickName);
					},
					fail() {
						console.log('失败');
					}
				});
			},
			/**
			 * @description 获取回收机列表
			 */
			getMachineList() {
				let machineData = [{
						machineId: 1,
						machineNo: 'hws71',
						address: '物华园',
						longitude: 121.43266,
						latitude: 31.28819,
						distance: '0m',
						status: '1', // 1-正常投递, 0-维护中
					},
					{
						machineId: 2,
						machineNo: 'hws72',
						address: '永和雅园',
						longitude: 121.42990,
						latitude: 31.28705,
						distance: '0m',
						status: '1',
					},
					{
						machineId: 3,
						machineNo: 'hws73',
						address: '万荣小区',
						longitude: 121.43715,
						latitude: 31.28505,
						distance: '0m',
						status: '0',
					},
				];
				let machineList = machineData.map(item => {
					let distance = this.commonJs.getDistance(this.currentLatitude, this.currentLongitude, item.latitude, item.longitude)
					distance = distance < 1 ? `${distance.toFixed(2) * 1000}m` : `${distance.toFixed(2)}km`
					item = {
						...item,
						distance
					}
					return item;
				});

				this.setMachineList(machineList);
			},
			/**
			 * @description 扫码投递函数
			 */
			scanDeliver() {
				uni.scanCode({
					success: function(res) {
						console.log(res)
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},

		}
	}
</script>

<style>
	@import url("../../css/index/index.css");
</style>
